﻿<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage/Admin.Master" CodeBehind="TestYJ.aspx.vb" Inherits="GoodAnotApp.TestYJ" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>CSS3 Slider Carousel Experiment</title>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1; charset=utf-8" />
    <script src="Modules/Shop Module/Home.js" type="text/javascript"></script>

  <style type="text/css">
    body {
      background-color:none;
      background-repeat:no-repeat;
      overflow-x:hidden;
    }
    input#text {width:500px;}
    input#range {}
    textarea#text {width:500px; height:300px;}
    img#zoom {
      border:10px solid #eee;
      cursor:pointer;
      -webkit-opacity:1.0;
      -webkit-transition: all 0.2s ease-out;
      -webkit-box-shadow: #333 0px 10px 10px;
    }
    div#zoom_container {
      position:absolute;
      top:200px;
      height: 250px;
      width:1000px;
      margin:0 auto;
      z-index:1000;
      display:none;
    }
    div#dummy img {display:none;}
    div#container {
      height: 250px;
      width:1000px;
      margin: 75px auto;
      -webkit-perspective: 700;
    }
    div#buttons {
      width:385px;
      padding:7px 20px 0 20px;
      position:relative;
      margin:15px auto;
      text-align:center;
      background-color: rgba(200,200,200,0.3);
      border:1px solid #aaa;
      z-index:0;
      -webkit-border-radius: 20px;
    }
    header {
      font-family: Sans-Serif;
      font-size:12px;
      text-align:right;
      color: #fff;
    }
    input[type="button"]{ font-size: 24px;}
    input#range {
      width:300px;
    }
    ul {
      width:100%;
      list-style:none;
      margin:0px auto;
      -webkit-transform-style: preserve-3d;
    }
    li {
      -webkit-opacity: 1.0;
      height:500px;
    }
    li.img {
      position:absolute;
      -webkit-transition: all 0.3s ease-out;
      -webkit-transform-origin: 50% 5%;
      cursor:pointer;
    }
    li.img canvas {
      -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.8)));;
    }
    .coverflow0 {
      -webkit-opacity: 0.0;
      left:-5%;
    }
    .coverflow1 {
      -webkit-transform: rotateY(65deg) translate(0px, 100px);
      -webkit-opacity: 0.1;
      left:0%;
      z-index:0;
    }
    .coverflow2 {
      -webkit-transform: rotateY(65deg) translate(0px, 80px);
      -webkit-opacity: 0.3;
      left:5%;
      z-index:1;
    }
    .coverflow3 {
      -webkit-transform: rotateY(65deg) translate(0px, 60px);
      -webkit-opacity: 0.7;
      left:10%;
      z-index:2;
    }
    .coverflow4 {
      -webkit-transform: rotateY(65deg) translate(0px, 40px);
      left:15%;
      z-index:3;
    }
    .coverflow5 {
      -webkit-transform: rotateY(65deg) translate(0px, 20px);
      left:20%;
      z-index:4;
    }
    .coverflow6 {
      -webkit-transform: rotateY(0deg) scale(1.15) translate(0px, 0px);
      left:36.1%;
      z-index:10;
    }
    .coverflow7 {
      -webkit-transform: rotateY(-65deg) translate(0px, 20px);
      left:52.5%;
      z-index:4;
    }
    .coverflow8 {
      -webkit-transform: rotateY(-65deg) translate(0px, 40px);
      left:57.5%;
      z-index:3;
    }
    .coverflow9 {
      -webkit-transform: rotateY(-65deg) translate(0px, 60px);
      -webkit-opacity: 0.7;
      left:62.5%;
      z-index:2;
    }
    .coverflow10 {
      -webkit-transform: rotateY(-65deg) translate(0px, 80px);
      -webkit-opacity: 0.3;
      left:67.5%;
      z-index:1;
    }
    .coverflow11 {
      -webkit-transform: rotateY(-65deg) translate(0px, 100px);
      -webkit-opacity: 0.1;
      left:72.5%;
      z-index:0;
    }
    .coverflow12 {
      -webkit-opacity: 0.0;
      left:77.5%;
    }
    a:link { 
      color: #999;
    }
  </style>

  <script type="text/javascript">
      var coverflow = function () {
          var radius = 20;
          var side = 250;
          var long_side = 700;
          var offset_x = 0;
          var offset_y = 0;
          var pop_x = 0;
          var pop_y = 0;
          var offset = 6;
          var display_offset = 6;
          var queue = [];
          var flipping = false;
          /*
          * creates canvas elements to shape images of regular square 
          */
          function createCanvasElement(img) {
              var canvas = document.createElement('canvas');
              canvas.setAttribute('width', side);
              canvas.setAttribute('height', side);
              var _height = img.naturalHeight;
              var _width = img.naturalWidth;
              var w = false; // width is shorter?
              if (_height > _width) w = true;
              var sx, sy, sw, sh;
              if (w) {
                  var _side = _width;
                  sx = 0;
                  sy = _height / 2 - _side / 2;
              } else {
                  var _side = _height;
                  sx = _width / 2 - _side / 2;
                  sy = 0;
              }
              sw = _side;
              sh = _side;

              var cx = canvas.getContext('2d');
              cx.beginPath();
              cx.moveTo(radius, 0);
              cx.lineTo(canvas.width - radius, 0);
              cx.quadraticCurveTo(canvas.width, 0, canvas.width, radius);
              cx.lineTo(canvas.width, canvas.height - radius);
              cx.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height);
              cx.lineTo(radius, canvas.height);
              cx.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius);
              cx.lineTo(0, radius);
              cx.quadraticCurveTo(0, 0, radius, 0);
              cx.clip();
              cx.drawImage(img, sx, sy, sw, sh, 0, 0, side, side);
              $(canvas).click(coverflow.popup(img));
              return canvas;
          }
          /*
          * pop flow object from queue and excute flip motion.
          */
          function flip() {
              var flow = queue.shift();
              if (!flow) {
                  flipping = false;
                  return;
              }
              flipping = true;
              var _offset = display_offset + flow.vector;
              var speed = 0.05;
              if (queue.length < 4) speed = 0.1;
              if (queue.length < 2) speed = 0.2;
              var canvas = $('#coverflow li');
              $('#coverflow li').each(function (index) {
                  var order = index + _offset;
                  if (order <= 0) {
                      $(this).attr('class', 'img coverflow0');
                  } else if (order > 11) {
                      $(this).attr('class', 'img coverflow12');
                  } else {
                      $(this).attr('class', 'img coverflow' + (order));
                  }
              })
              display_offset = _offset;
              setTimeout(flip, speed * 1000 + 30);
          }
          /*
          * create flow object and push into queue
          */
          function slide(diff) {
              return function () {
                  var _offset = offset + diff;
                  if (_offset > 6 || _offset < (($('#coverflow li').length - 7) * -1)) return false;
                  coverflow.move(diff * -1);
                  offset = _offset;
                  $('#range').val(_offset * -1);
                  if (!flipping) flip();
              }
          }
          return {
              /*
              * initialization
              */
              init: function () {
                  $('#dummy img').each(function (index) {
                      var canvas = createCanvasElement(this);
                      var li = $('<li class="img"/>');
                      var order = index + 6;
                      if (order <= 11) {
                          li.addClass('coverflow' + order);
                      } else {
                          li.addClass('coverflow12');
                      }
                      $('#coverflow').append(li.append(canvas));
                  });
                  $('#left').click(slide(1));
                  $('#right').click(slide(-1));
                  $('#range').change(function () {
                      var range = $(this).val();
                      coverflow.move(parseInt(range) + offset);
                      offset = range * -1;
                      if (!flipping) flip();
                  });
                  $(window).keydown(function (e) {
                      if (e.keyCode === 27) coverflow.popdown();
                      if (e.keyCode === 39) slide(-1)();
                      if (e.keyCode === 37) slide(1)();
                  });
                  $('#zoom_container').css('left', $('#container').css('margin-left'));
              },
              /*
              * show popup image
              */
              popup: function (img) {
                  return function () {
                      var _height = img.naturalHeight;
                      var _width = img.naturalWidth;
                      var w = false; // width is shorter?
                      if (_height > _width) w = true;
                      var sx, sy, sw, sh;
                      if (w) {
                          sh = long_side;
                          sw = long_side / _height * _width;
                      } else {
                          sh = long_side / _width * _height;
                          sw = long_side;
                      }

                      var _img = $('<img/>');
                      _img.attr('src', img.src);
                      _img.attr('width', sw);
                      _img.attr('height', sh);
                      _img.attr('id', 'zoom');
                      _img.css('margin', (((long_side / 2) - sh) / 2) + 'px ' + ((985 - sw) / 2) + 'px');
                      _img.css('-webkit-opacity', 0);
                      _img.click(function () {
                          coverflow.popdown();
                      });
                      $('#zoom_container').show().append(_img);
                      setTimeout(function () { _img.css('-webkit-opacity', 1); }, 10);
                  }
              },
              /*
              * hide popup image
              */
              popdown: function () {
                  $('#zoom').css('-webkit-opacity', 0);
                  setTimeout(function () {
                      $('#zoom').remove();
                      $('#zoom_container').hide();
                  }, 500);
              },
              /*
              * creates multiple flow objects by range movement and push into queue
              */
              move: function (diff) {
                  coverflow.popdown();
                  var abs = diff < 0 ? diff * -1 : diff;
                  var vector = 1;
                  if (diff > 0) vector = -1;
                  for (var i = 0; i < abs; i++) {
                      var flow = { 'vector': vector, 'speed': 0.03 }
                      queue.push(flow);
                  }
                  return true;
              }
          }
      } ();
  </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <h1>Photos by Gregor Hochmuth</h1>
  <div id="dummy">
   <img src="Styles/Images/ratingStarSaved.png" />
      <img src="Styles/Images/sortDown.gif" />
      <img src="Styles/Images/sortUp.gif" />
      <img src="Styles/Images/star_x_grey.gif" />
      <img src="Styles/Images/star_x_orange.gif" />
      <img src="Styles/Images/AddOutlet-Button.png" />
      <img src="Styles/Images/go-button.jpg" />
      <img src="Styles/Images/Follow_This_Outlet.gif" />
  </div>
  <div id="container">

   <ul id="coverflow"></ul>
  </div>
  <div id="buttons">
   <!--input id="left" type="button" value="&larr;" /-->
   <input id="range" type="range" min="-6" max="2" value="-6" />
   <!--input id="right" type="button" value="&rarr;" /-->
  </div>
  <div id="zoom_container"></div>
</asp:Content>
